
import Item from './Item';

import React, { Component } from 'react';

class App extends Component {
  // 存储输入框内的值
  bbb = ''
  // 存储点击时 bbb的值
  list = []
  // 记录添加的条数
  count = 0
  // 输入时 把内容保存到变量内
  aaa = (ev)=>{
    let item = ev.target.value.trim()
    // 判断是否大于10个字符
    if (item.length<=10) {
      this.bbb = item
    }else{
      // 大于就截取只有十个
      this.bbb = item.substring(0,10)
      alert('最多可以输入10个')
    }
    // 强刷
    this.forceUpdate()
  }
    // 点击添加时把之前保存的 push 到变量内
  tianjia=(ev) =>{
    // 判断内容不可有 admin
    if (/admin/.test(this.bbb)) return alert('内容不可以有admin')
    if (this.bbb === '') return alert('不可添加空值')
      // 符合条件就添加
      this.list.push(this.bbb)
      // 计数加一
      this.count++
      // 清空输入框
      this.bbb =''
      // 强刷
      this.forceUpdate()
  }
  // 删除 点击的
  shanchu=(index)=>{
    // 筛选后在赋值回去
    // this.list = this.list.filter((res) => res!==item)
    this.list.splice(index,1)
    // 强刷
    this.forceUpdate()
  }
  // 输入框回车事件
  jianpan = (ev)=> ev.keyCode===13&& this.tianjia()
  render() {
    return (
      <div>
        <input type="text" value={this.bbb} onInput={this.aaa} onKeyDown={this.jianpan} />
        <button onClick={this.tianjia}>点击添加</button>
          {/* 添加条数 */}
        <p>已经添加条数：{this.count}</p>
        <p>目前条数：{this.list.length}</p>
        <hr />
        <Item list={this.list} data={this.shanchu} />
      </div>
    );
  }
}

export default App;
